import React from 'react';
import { Card, Form, Row, Col, Input, Button, Table, DatePicker, Radio, Modal, Alert, Select } from 'antd';
import { FormInstance } from 'antd/lib/form';
import * as echarts from 'echarts';
import { history } from 'umi';

const { RangePicker } = DatePicker;

const { Option, OptGroup } = Select;

import qqimg from '@/assets/image/支付宝付款.png';

const tabListNoTitle = [
	{
	    key: '3',
	    tab: '收益管理',
	},
	{
	    key: '1',
	    tab: '订单管理',
	},
	{
	    key: '2',
	    tab: '资源管理',
	},
]

const option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['出稿量', '成交收益']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2021-04-17', '2021-04-18', '2021-04-19', '2021-04-20', '2021-04-21', '2021-04-22', '2021-04-23']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '出稿量',
            type: 'line',
            stack: '总量',
            data: [120, 120, 120, 120, 120, 120, 120]
        },
        {
            name: '成交收益',
            type: 'line',
            stack: '总量',
            data: [120, 120, 120, 120, 120, 120, 120]
        },
    ]
};

const incomeColumns = [
	{
		title: '时间',
		dataIndex: 'number',
		key: 'number'
	},
	{
		title: '资金类型',
		dataIndex: 'number',
		key: 'number'
	},
	{
		title: '资金变动（元）',
		dataIndex: 'number',
		key: 'number'
	},
	{
		title: '账户余额（元）',
		dataIndex: 'number',
		key: 'number'
	},
	{
		title: '对应媒体',
		dataIndex: 'number',
		key: 'number'
	},
	{
		title: '备注',
		dataIndex: 'number',
		key: 'number'
	}
]

const tableData = [];

const newOptions = [
	{ label: <> <img src={qqimg} style={{width: 24,height: 24}}/> </>, value: '支付宝' }
];

class Income extends React.Component{
	formRef = React.createRef<FormInstance>();
	echartsRef = React.createRef();
	state = {
		isModalVisible: false,
		isModalVisible1: false
	}
	componentDidMount() {
		if(this.echartsRef.current){
			let myChart = echarts.init(this.echartsRef.current);
			if (option && typeof option === 'object') {
			    myChart.setOption(option);
			}
		}
		
  	}
	render(){
		const { isModalVisible, isModalVisible1 } = this.state;
		return (
			<>
				<Row gutter={20}>
					<Col span={6}>
						<Card title="我的收益" style={{ width: '100%' }} hoverable extra={<><Button type="text" onClick={() => this.setState({isModalVisible1: true})}>收益转换 
						<span style={{float: 'right',width: 8,height: 8,background: 'red',borderRadius: '50%',margin: '7px 0px 7px 5px'}}></span>
						</Button></>} >
							<div>
								<Row style={{padding: '13px 0'}}>
									<Col span={24}>
										<span>账户收益余额 (元)</span>
									</Col>
									<Col span={12}>
										<span style={{fontSize: 32}}>0.00</span>
									</Col>
									<Col span={12} style={{textAlign: 'right'}}>
										<Button type="primary" onClick={ () => this.setState({isModalVisible: true}) }>提现</Button>
									</Col>
								</Row>
								<Row style={{padding: '13px 0'}}>
									<Col span={24}>
										<span>不可用余额 (元)</span>
									</Col>
									<Col span={24}>
										<span style={{fontSize: 20}}>0.00</span>
									</Col>
								</Row>
								<Row style={{padding: '13px 0'}}>
									<Col span={12}>
										<div>历史收益总额 (元)</div>
										<div style={{fontSize: 20}}>0.00</div>
									</Col>
									<Col span={12}>
										<div>收益提取总额 (元)</div>
										<div style={{fontSize: 20}}>0.00</div>
									</Col>
								</Row>
							</div>
						</Card>
					</Col>
					<Col span={18}>
						<Card title="资金趋势" style={{ width: '100%' }} hoverable extra={<>
							<Button type="text" style={{color: 'rgb(24, 144, 255)'}}><span style={{float: 'left',width: 9,height: 9,background: 'rgb(24, 144, 255)',margin: '7px 5px 0 0'}}></span>最近7天</Button>
							<Button type="text" style={{color: 'rgb(191, 191, 191)'}}><span style={{float: 'left',width: 9,height: 9,background: 'rgb(191, 191, 191)',margin: '7px 5px 0 0'}}></span>最近15天</Button>
							<Button type="text" style={{color: 'rgb(191, 191, 191)'}}><span style={{float: 'left',width: 9,height: 9,background: 'rgb(191, 191, 191)',margin: '7px 5px 0 0'}}></span>最近30天</Button>
							   
						</>}>
							<Row>
								<Col span={6}>
									<div>
										成交收益 (元)
									</div>
									<div style={{fontSize: 24}}>
										0.00
									</div>
								</Col>
								<Col span={6}>
									<div>
										出稿量 (篇)
									</div>
									<div style={{fontSize: 24}}>
										0
									</div>
								</Col>
								<Col span={6}>
									<div>退款金额 (元)</div>
									<div style={{fontSize: 24}}>0.00</div>
								</Col>
							</Row>
							<Row>
								<Col span={24}>
									<div style={{height: 192}} ref={this.echartsRef}></div>
								</Col>
							</Row>
						</Card>
					</Col>
					<Col span={24} style={{marginTop: 20}}>
						<Card title="财务明细" style={{ width: '100%' }} extra={<>
							<span>快捷查看：</span>
							<Radio.Group buttonStyle="solid">
							 	<Radio.Button value="a">所有明细</Radio.Button>
						      	<Radio.Button value="b">出稿收入</Radio.Button>
						      	<Radio.Button value="c">退款记录</Radio.Button>
						      	<Radio.Button value="d">提现记录</Radio.Button>
						      	<Radio.Button value="e">转换纪录</Radio.Button>
						    </Radio.Group>
						</>}>
							<Form ref={this.formRef} >
						    	<Row gutter={20}>
						    		<Col span={24}>
						    			<Row gutter={20}>
						    				<Col span={10}>
								    			<Form.Item
											        label="订单日期"
											        name="username"
											    >
											    	<RangePicker showTime />
											    </Form.Item>
									    	</Col>
									    </Row>
						    		</Col>
						    		<Col span={5}>
						    			<Form.Item
									        label="资金类型"
									        name="username"
									    >
									    	<Select placeholder="请选择">
												<OptGroup label="收入类型">
													<Option value="jack">出稿收入</Option>
													<Option value="lucy">账户修正</Option>
												</OptGroup>
													<OptGroup label="支出类型 ">
													<Option value="Yiminghe">提现</Option>
													<Option value="1">收益转换</Option>
													<Option value="2">退款</Option>
												</OptGroup>
											</Select>
									    </Form.Item>
						    		</Col>
						    		<Col span={5}>
						    			<Form.Item
									        label="订单号"
									        name="username"
									    >
									    	<Input />
									    </Form.Item>
						    		</Col>
						    	</Row>
						    	<Row gutter={20}>
						    		<Col span={5}>
						    			<Form.Item
									        label="查找媒体"
									        name="username"
									    >
									    	<Input />
									    </Form.Item>
						    		</Col>
						    		<Col span={5}>
						    			<Button type="primary">查询一下</Button>
						    		</Col>
						    	</Row>
						    </Form>
						    <Table columns={incomeColumns} dataSource={tableData} />
						</Card>
					</Col>
				</Row>
				<Modal title="提现" visible={isModalVisible} footer={null} width="500px" onCancel={() => { this.setState({isModalVisible: false}) }}>
					<div style={{padding: '0 20px'}}>
			        <Form ref={this.formRef} >
			        	<Form.Item label="收益余额" >
			        		<span style={{fontSize: 18,color: 'red'}}>¥0.00</span>
			        	</Form.Item>
			        	<Form.Item label="提现方式" name="username1">
			        		<Radio.Group options={newOptions}>
						    </Radio.Group>
			        	</Form.Item>
			        	<Form.Item label="提现户名" name="username2">
			        		<Input placeholder="请输入支付宝实名认证名字" />
			        	</Form.Item>
			        	<Form.Item label="提现账户" name="username3">
			        		<Input placeholder="请输入支付宝账户" />
			        	</Form.Item>	
			        	<Form.Item label="提现金额" name="username4">
			        		<Input placeholder="最低提现一元" />
			        	</Form.Item>
			        	<Form.Item label="支付密码">
			        		<Row gutter={8}>
          						<Col span={12}>
          							<Form.Item  name="username5">
					        		<Input placeholder="请输入支付密码" />
					        	</Form.Item>
          						</Col>
					        	<Col span={12}>
						        	<Button type="primary">申请提现</Button>
						        	<Button style={{marginLeft: 10}} onClick={() => this.setState({isModalVisible: false})}>取消</Button>
					        	</Col>
				        	</Row>
			        	</Form.Item>
			        </Form>
			        </div>
			        <Alert
				      message="温馨提示"
				      description={
				      	<>
				      		<div>1.请确认账户信息是否正确，避免不必要的损失！</div>
				      		<div>2.提现申请后，平台将会在每周五或周六处理到账！</div>
				      	</>
				      }
				      type="info"
				      showIcon
				    />
			    </Modal>
			    <Modal title="提现" visible={isModalVisible1} footer={null} width="500px" onOk={() => { this.setState({isModalVisible1: false}) }} onCancel={() => { this.setState({isModalVisible1: false}) }}>
			    	<div style={{padding: '0 20px'}}>
			    		<Form ref={this.formRef} >
			    			<Form.Item label="消费余额" >
				        		<span style={{fontSize: 18}}>¥4.00</span>
				        	</Form.Item>
				        	<Form.Item label="收益余额" >
				        		<span style={{fontSize: 18,color: 'red'}}>¥0.00</span>
				        	</Form.Item>	
				        	<Form.Item label="转化金额" name="username1">
				        		<Input placeholder="请输入转化金额" />
				        	</Form.Item>
				        	<Form.Item label="支付密码" name="username2">
				        		<Input placeholder="请输入支付密码" />
				        	</Form.Item>
				        	<Form.Item >
				        		<div style={{marginLeft: 70}}>
				        		<Button type="primary">立即转换</Button>
						        	<Button style={{marginLeft: 10}} onClick={() => this.setState({isModalVisible1: false})}>取消</Button>
						        	</div>
				        	</Form.Item>
			    		</Form>
			    	</div>
			    	<Alert
				      message="温馨提示"
				      description={
				      	<>
				      		<div>操作后，收益余额资金将会转化到账户余额，消费余额可直接用于发稿。</div>
				      	</>
				      }
				      type="info"
				      showIcon
				    />
			    </Modal>
			</>
		)
	}
}


export default class Message extends React.Component{
	state = {
		noTitleKey: '3'
	}
	onTabChange = (key) => {
		if(key === '1'){
			history.push('/mediaCenter/orderProcessing')
		}else if(key === '2'){
			history.push('/mediaCenter/myResources/list')
		}
	}
	render(){
		return (
			<div style={{height: '100%',background: '#fff',padding: '12px 24px 24px' }}>
				<Card tabList={tabListNoTitle} activeTabKey={this.state.noTitleKey} onTabChange={key => {
		            this.onTabChange(key);
		          }} bordered={false} style={{ width: '100%' }}>
		          	<Income/>
				</Card>
			</div>
		)
	}
}